<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>战神 | 管理后台</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- bootstrap 3.0.2 -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="/bootstrap/css/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
    <!-- font Awesome -->
    <link href="/bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/bootstrap/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/bootstrap/css/AdminLTE.css" rel="stylesheet" type="text/css" />

    <style>
        .checkedtr{
            background-color: antiquewhite;
        }
    </style>
    <!-- jQuery 2.0.2 -->
    <script src="/bootstrap/js/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap-treeview.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->
<header class="header">

</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Left side column. contains the logo and sidebar -->

    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="">
        <!-- Content Header (Page header) -->

        <!-- Main content -->
        <section class="content">
            <!-- general form elements -->
            <div class="row">
                <div class="col-md-6">
                    <div class="box box-primary">
                        <div class="box-header">
                            <h3 class="box-title">所有角色</h3>
                            <div class="box-tools">
                                <form method="post">
                                    <div class="input-group">
                                        <input type="text" id="keyword_input" name="keyword" class="form-control input-sm pull-right" style="width: 150px;" value="${keyword!}" placeholder="Search"/>
                                        <input type="hidden" id="keyword_page_id" name="pageNo" value="">
                                        <input type="hidden" id="keyword_uid" name="uid" value="">
                                        <div class="input-group-btn">
                                            <button id="keyword_btn" class="btn btn-sm btn-default" type="submit"><i class="fa fa-search"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-body table-responsive no-padding">
                            <table class="table table-hover">
                                <tr>
                                    <th>ID</th>
                                    <th>角色名</th>
                                    <th>标签</th>
                                    <th>创建日期</th>
                                    <th>状态</th>
                                </tr>
                            <#list pager.content as role>
                                <tr class="user_list"  data-uid="${role.roleId}">
                                    <td>${role.roleId}</td>
                                    <td>${role.roleName}</td>
                                    <td>${role.roleTag}</td>
                                    <td>${role.createTime?string("yyyy-MM-dd")}</td>
                                    <td><#if role.status==1>
                                        <span class="label label-success">正常</span>
                                    <#else >
                                        <span class="label label-danger">停用</span>
                                    </#if></td>
                                </tr>
                            </#list>

                            </table>
                        </div><!-- /.box-body -->
                        <div class="box-footer">
                            <ul class="pagination pagination-sm pull-right">
                            <#include "/common/page.ftl" />
                            </ul>
                        </div>
                    </div><!-- /.box -->
                </div>
                <div class="col-md-6">
                    <div class="box box-warning">
                        <div class="box-header">
                            <h3 class="box-title">权限</h3>
                        </div><!-- /.box-header -->
                        <div class="box-body table-responsive no-padding">
                            <ul id="treeview2" class="ztree"></ul>
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div>
                <div class="col-md-12">
                    <div class="box box-success">
                        <div class="box-header">
                            <h3 class="box-title">所选角色拥有的权限</h3>
                        </div>
                        <div class="box-body " id="has_per_span">
                            <ul id="treeview1" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </section><!-- /.content -->
    </aside><!-- /. -->
</div><!-- ./wrapper -->



<!-- Bootstrap -->
<script src="/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/bootstrap/js/AdminLTE/app.js" type="text/javascript"></script>

<!--zTree-->
<script type="text/javascript" src="/bootstrap/js/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/bootstrap/js/ztree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/bootstrap/js/ztree/jquery.ztree.exedit.js"></script>

<script>
    //把已经有的颜色改改
    var setting1 = {
        view: {
            selectedMulti: false
        },
        edit: {
            enable: false,
            showRemoveBtn: false,
            showRenameBtn: false
        },
        data: {
            keep: {
                parent:true,
                leaf:true
            },
            simpleData: {
                enable: true
            }
        }
    };

    var zNodes1 =${hastreeJsonstr};

    var setting2 = {
        async: {
            enable: true,
            url: getUrl
        },
        view: {
            selectedMulti: false
        },
        check: {
            enable: true,
            chkboxType:{'Y':'','N':''}
        },
        edit: {
            enable: false,
            showRemoveBtn: false,
            showRenameBtn: false
        },
        data: {
            keep: {
                parent:true,
                leaf:true
            },
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeExpand: beforeExpand,
            onAsyncSuccess: onAsyncSuccess,
            onAsyncError: onAsyncError,
            onCheck:onCheck,
            beforeCheck:beforeCheck
        }
    };

    var zNodes2 =${treeJsonstr};

    function getUrl(treeId, treeNode) {
        var param = "pid="+treeNode.id+"&uid="+uid;
        return "rolesubPermission.json?" + param;
    }

    function onCheck(event, treeId, treeNode){
        console.log(treeNode);
        //判断是不是选中
    $.post('obpermission.json',{'uid':uid,'pid':treeNode.id},function(data){
            if(data.result=='success'){
                zNodes1=data.hasData;
                $.fn.zTree.init($("#treeview1"), setting1, zNodes1);
            }
        });
    }

    function beforeCheck(event, treeId, treeNode){
        if(isNaN(uid)){
            alert('请先选择要修改的角色');
            return false;
        }
        return true;
    }

    function beforeExpand(treeId, treeNode) {
        if (!treeNode.isAjaxing) {
            ajaxGetNodes(treeNode, "refresh");
            return true;
        } else {
            alert("zTree 正在下载数据中，请稍后展开节点。。。");
            return false;
        }
    }
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        if (!msg || msg.length == 0) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        treeNode.icon = "";
        zTree.updateNode(treeNode);
    }
    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        alert("异步获取数据出现异常。");
        treeNode.icon = "";
        zTree.updateNode(treeNode);
    }
    function ajaxGetNodes(treeNode, reloadType) {
        var zTree = $.fn.zTree.getZTreeObj("treeview2");
        if (reloadType == "refresh") {
            treeNode.icon = "/bootstrap/css/ztree/zTreeStyle/img/loading.gif";
            zTree.updateNode(treeNode);
        }
        zTree.reAsyncChildNodes(treeNode, reloadType, true);
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#treeview1"), setting1, zNodes1);
        $.fn.zTree.init($("#treeview2"), setting2, zNodes2);
    });

    var uid='${uid!}';

    if(uid!=''){
        $('.user_list').each(function(){
            if(uid==$(this).attr('data-uid')){
                $(this).addClass("checkedtr");
            }
        });
    }
    $('.user_list').on('click',function(){
        $('.user_list').removeClass("checkedtr");
        $(this).addClass("checkedtr");
        uid=$(this).attr('data-uid');
        //加载角色
        $('#keyword_uid').val(uid);
        $('#keyword_page_id').val(${pageNo});
        $('#keyword_btn').click();

    });
    <#--var defaultData = ${treeJsonstr};-->
    <#--$('#treeview1').treeview({-->
        <#--data: defaultData,-->
        <#--levels:5,-->
        <#--onNodeSelected: function(event, node) {-->
            <#--if(!isNaN(uid)){-->
                <#--$.post('obpermission.json',{'uid':uid,'pid':node.pid},function(data){-->
                    <#--if(data.result=='success'){-->
                        <#--window.location.reload();-->
                    <#--}-->
                <#--});-->
            <#--}-->
        <#--},-->
        <#--onNodeUnselected: function (event, node) {-->
            <#--checkpid=0;-->
        <#--}-->
    <#--});-->

</script>

</body>
</html>